<template>
    <view class="container" :style="themeColor">
        <oreder-header @searchFn="searchFn" @doFilter="doFilter"></oreder-header>
        <tab-bar :tabs="items" nobg="nobg" @clickTab="clickTab" :tabIndex="tabIndex"></tab-bar>
        <view class="main">
            <swiper
                class="swiper product-main-list"
                :style="{ height: listHeight }"
                :current="tabIndex"
                @change="swiperChange">
                <swiper-item v-for="(swiperItem, swiperIndex) in items" :key="swiperIndex">
                    <order-list
                        v-if="loadOk"
                        :ref="'productList_' + swiperIndex"
                        :swiperIndex="swiperIndex"
                        :height="listHeight"
                        :state="swiperItem.state"
                        :requestData="requestData"
                        @changeIds="changeIds"></order-list>
                    <view class="bottom-bar" v-if="swiperIndex == 1">
                        <text class="btn btn-success" @click="mergePay">合并支付</text>
                    </view>
                </swiper-item>
            </swiper>
        </view>
    </view>
</template>

<script>
import { mapGetters } from "vuex"
import orederHeader from "@/pages_supplier/components/order/order-header.vue"
import orderList from "@/pages_supplier/components/order/order-list.vue"
import tabBar from "@/components/common/tab-bar.vue"
import storage from "@/uni-sub-base/utils/storage.js"
import { getElementHeight } from "@/uni-sub-base/utils/elementUtil.js"
import { MergeOrderPay } from "@/service/api/order.js"
export default {
    components: {
        orederHeader,
        orderList,
        tabBar,
    },
    data() {
        return {
            optEmpty: {
                icon: "/static/img/empty.png", // 图标路径 (建议放入static目录, 如 /static/img/mescroll-empty.png )
                tip: "~ 暂无数据 ~", // 空提示
            },
            isloadding: false,
            tabIndex: 0,
            items: [
                {
                    state: "-1",
                    title: "全部",
                },
                {
                    state: "0,12",
                    title: "待付款",
                },
                {
                    state: "1",
                    title: "待确认",
                },
                {
                    state: "2,13",
                    title: "待发货",
                },
                {
                    state: "6",
                    title: "待收货",
                },
                {
                    state: "10",
                    title: "已完成",
                },
            ],
            listHeight: "", //list所需高度
            loadOk: false,
            searchKey: "",
            requestData: {
                postType: "",
                searchKey: "",
                startTime: "",
                endTime: "",
                __index: 0,
            },
            ids: "", //合单支付ids
        }
    },
    watch: {
        //监听更新
        getUpOrderView(e) {
            this.refresh()
        },
    },
    computed: {
        ...mapGetters(["getUpOrderView"]),
    },
    onShow() {
        //判断是要切到哪个tab
        let orderType = storage.getCache("orderType")
        if (orderType) {
            for (var i = 0; i < this.items.length; i++) {
                let item = this.items[i]
                if (item.state == orderType) {
                    this.tabIndex = i
                }
            }
            storage.removeCache("orderType")
        }
        this.easyUpSupplierTabBarBadge()
        let miniProgramState = storage.getCache("miniProgram")
        if (miniProgramState) {
            this.refresh()
            storage.removeCache("miniProgram")
        }
    },
    mounted() {
        this.getListHeight()
    },
    methods: {
        changeIds(ids) {
            this.ids = ids
        },
        mergePay() {
            let orderIds = this.ids
            if (!this.ids || this.ids == "") {
                this.easyToast("请至少勾选一个订单")
                return false
            }
            if (this.ids.charAt(this.ids.length - 1) == ",") {
                orderIds = this.ids.slice(0, -1)
            }
            let param = {
                orderIds: orderIds,
            }
            // 此处调用合并支付接口
            MergeOrderPay(param).then((res) => {
                if (res && res.State) {
                    this.easyGoTo(
                        "/pages_supplier/packet/order/waitPayList?outTradeNo=" +
                            res.Data.OutTradeNo +
                            "&payMoney=" +
                            res.Data.PayMoney +
                            "&sn=" +
                            res.Data.Sn +
                            "&isMerge=" +
                            res.Data.IsMerge +
                            "&orderId=" +
                            res.Data.ID,
                    )
                } else {
                    if (res.Msg) {
                        this.easyToast(res.Msg)
                    }
                }
            })
        },
        getListHeight(element) {
            //获取商品高度
            getElementHeight(this, ".main", (e) => {
                this.listHeight = e + "px"
                this.loadOk = true
            })
        },
        swiperChange(e) {
            let tabIndex = e.detail.current
            this.clickTab(tabIndex)
        },
        //tab切换
        clickTab(index) {
            if (this.tabIndex != index) {
                this.tabIndex = index
            }
        },
        //搜索
        searchFn(searchKey) {
            this.requestData.searchKey = searchKey
            this.refresh()
        },
        //筛选
        doFilter(data) {
            this.requestData.startTime = data.startDate ? data.startDate + "T00:00:00.000Z" : ""
            this.requestData.endTime = data.endDate ? data.endDate + "T23:59:59.000Z" : ""
            this.refresh()
        },
        refresh() {
            this.$refs.productList_0[0].refresh(this.requestData)
            this.$refs.productList_1[0].refresh(this.requestData)
            this.$refs.productList_2[0].refresh(this.requestData)
            this.$refs.productList_3[0].refresh(this.requestData)
            this.$refs.productList_4[0].refresh(this.requestData)
            this.$refs.productList_5[0].refresh(this.requestData)
        },
    },
}
</script>

<style lang="scss" scoped>
.container {
    display: flex;
    flex-direction: column;
}
</style>
